<template>
	<div class="container">
		<div class="mgb20">
			<span class="label">角色：</span>
			<el-select v-model="role.role_id" @change="handleChange">
				<el-option v-for="role in rolesInfos"
					:key="role.id"
					:value="role.name"
					:label="role.name + ':' + role.detail"
				>
				</el-option>
			</el-select>
		</div>
		<div class="mgb20 tree-wrapper">
			<el-tree
				ref="tree"
				:data="data"
				node-key="id"
				default-expand-all
				show-checkbox
				render-after-expand
				:default-checked-keys="checkedKeys"
			/>
		</div>
		<el-button type="primary" @click="onSubmit">保存权限</el-button>
	</div>
</template>

<script setup lang="ts" name="permission">
import { onActivated, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { usePermissStore } from '@/store/permiss';
import useUser from '@/hooks/User/useUser';

const role = ref({
	"role_id":"",
})
interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const data: Tree[] = [
	{
		id: '1',
		label: '系统首页'
	},
	{
		id: '2',
		label: '数据',
		children: [
			{
				id: '21',
				label: '拆分'
			},
			{
				id: '22',
				label: '合并'
			}
		]
	},
	{
		id: '3',
		label: '分析',
		children: [
			{
				id: '31',
				label: 'mNGS'
			},
			{
				id: '32',
				label: 'tNGS'
			}
		]
	},
	{
		id: '4',
		label: '流程监控',
		// children: [
		// 	{
		// 		id: '41',
		// 		label: '数据'
		// 	},
		// 	{
		// 		id: '42',
		// 		label: '分析'
		// 	}
		// ]
	},
	{
		id: '5',
		label: '结果展示',
		// children: [
		// 	{
		// 		id: '51',
		// 		label: '数据'
		// 	},
		// 	{
		// 		id: '52',
		// 		label: '分析'
		// 	}
		// ]
	},
	{
		id: '6',
		label: '重新分析'
	},
	{
		id: '7',
		label: '用户',
		children: [
			{
				id: '72',
				label: '用户权限'
			}
		]
	},
];
const permiss = usePermissStore();
// 获取当前权限
const checkedKeys = ref<string[]>([]);
const getPremission = () => {
	// 请求接口返回权限
	if(role.value.role_id === 'admin'){
		checkedKeys.value = permiss.defaultList[role.value.role_id];
	}else{
		// checkedKeys.value = permiss.defaultList['nu_user'];
	}
};
getPremission();
// 保存权限
const { setUserPermiss } = useUser()
const tree = ref<InstanceType<typeof ElTree>>();
let permissData = reactive({
	"permiss":[],
	"role_id": ""
})
const onSubmit = () => {
	// 获取选中的权限
	ElMessageBox.confirm('确定修改吗？', '提示',{
        type:"warning",
        draggable: true,
    }).then(res=>{
		let permissList = tree.value!.getCheckedKeys(false) 
		for( let key of tree.value!.getHalfCheckedKeys()){
			permissList.push(key)
		}
		permissData.permiss=permissList
		console.log(permissList)
		permissData.role_id=role.value.role_id
		// console.log(tree.value!.getCheckedKeys(false))
		setUserPermiss(permissData).then(res=>{
			if(res.data === 202){
				ElMessage.success('权限修改成功！')
			} else {
				ElMessage.error('权限修改出错:' + res.data)
			}
		})
	}).catch(()=>{ElMessage.warning("修改取消！")})
};
const handleChange = (val: string) => {
	for(const[key,value] of Object.entries(rolesInfos)){
		if(role.value.role_id.split(":")[0] === value["name"] ){
			let permiss = value["permissions"].split(",")
			tree.value!.setCheckedKeys(permiss);
		}
	}
}
const resetChecked = () => {
  tree.value!.setCheckedKeys([], false)
}
let rolesInfos = reactive([])
const { getRole } = useUser()
onMounted(()=>{
	getRole().then(res=>{
		for(const [key,value] of Object.entries(res.data)){
			rolesInfos.push(value)
		}
	})
})
</script>

<style scoped>
.tree-wrapper {
	max-width: 500px;
}
.label {
	font-size: 14px;
}
</style>
